<template>
	<div class="edit-index-box">
		<div class="status-column">
			<m-column @typeChange="typeChange" @shopChange="shopChange"></m-column>
		</div>
		<!-- 这是编辑的index页面 -->
		<div class="edit-index-content">
			<div class="left" v-if="false">
				<ul>
					<li v-for="(item, index) in liData" 
						:class="[li_active_index === item.index ? 'li_active' : '']"
						:key="index"
						@click="changeLiIndex(item.index)"
					>
						{{item.name}}
					</li>
				</ul>
			</div>
			<div class="right">
				<m-card 
					v-for="(item, index) in templateList" 
					:key="index" 
					:dataItem="item"
					:editEvent="editClickEvent.bind(this, item)"
					:enableEvent="enableClickEvent.bind(this, item.rid)"
					:deleteEvent="deleteClickEvent.bind(this, item.rid)"
					:modifyEvent="modifyClickEvent.bind(this, item)"
				>
				</m-card>
				<!-- 底部占位 -->
				<div class="right-footer"></div>
			</div>
		</div>
		<edit-model ref="editModel" title="修改基本信息" :closeCallback="clearParams">
			<div class="modify-template-box slot-banner" slot="main">	
				<div>
					<p class="eidt-slot-title">
						<span class="required">*</span>模板名称
					</p>
					<input type="text" v-model="tpName"/>
				</div>
				<div>
					<p class="eidt-slot-title">
						<span class="required"></span>模板描述
					</p>
					<textarea v-model="tpDesc"></textarea>
				</div>
				<div>
					<p class="eidt-slot-title">
						<span class="required"></span>模板预览图
					</p>
					<m-upload :imgShowList="thumbnailImg" ref="upload"></m-upload>
				</div>
				<div class="fabu-box">
					<blue-btn text="确定" :clickEvent="modify"></blue-btn>
				</div>
			</div>
		</edit-model>
		<m-toast ref="mToast"></m-toast>
		<m-dialog ref="mDialog"></m-dialog>
	</div>
</template>

<script>
import "./index.css";
import BlueButton from "../../edit-components/BlueButton";
import Column from "./Column";
import Dialog from "../../edit-components/Dialog";
import Toast from "../../edit-components/Toast";
import EditModel from "../../edit-components/EditModel";
import updated from "../../utils/TemplateAxios/add";
import enable from "../../utils/TemplateAxios/enable";
import deleteFn from "../../utils/TemplateAxios/delete";
import Card from "../../edit-components/Card";
import {mapMutations, mapGetters} from "vuex";
import ImgUpload from "../../real-components/ImgUpload2";
// import("../../real-containers/HomeCustPage/CustPage1/index.vue").then(data => {
// 	console.log(data);
// });
// import "../../utils/gw/data";
// console.log("test11", test11);
export default {
	data() {
		return {
			liData: [
				{ name: "模板列表", index: 0 },
				{ name: "关于模板", index: 1 },
			],
			li_active_index: 0,
			tpName: "",
			tpDesc: "",
			thumbnailImg: [],
			updateItem: null
		};
	},
	computed: {
		...mapGetters([
			"getConfigParams"
		]),
		//模板列表
		templateList() {
			console.log("templateList", this.getConfigParams.templateConfigList);
			return this.getConfigParams.templateConfigList.filter(item => {
				return item.tpDesc !== "specialtemplateforaddpages";
			}).sort((m, n) => {
				let time1 = m.updateTm || m.createTm;
				let time2 = n.updateTm || n.createTm; 
				return time2 - time1;
			});
		},
		specialDomTree() {
			let template = this.getConfigParams.templateConfigList.find(item => {
				return item.tpDesc === "specialtemplateforaddpages";
			});
			if (template) {
				let obj = JSON.parse(template.tpConfig);
				delete obj.config;
				return obj;
			} else {
				return {};
			}
		}
		//缩略图
	},
	filters: {
	//将时间戳格式化返回
		getDate(time) {
			if (!time) {
				return "创建时间";
			}
			let date = new Date(time);
			return `${date.getFullYear()}-${date.getMonth() +
				1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
		}
	},
	methods: {
		//门店改变，重新请求并渲染模板列表
		shopChange(item) {
			// console.log("父组件", item);
		},
		//版本改变，重新请求并渲染模板列表
		typeChange() {
			// console.log("父组件", item);
		},
		changeLiIndex(index) {
			this.li_active_index = index;
		},
		//编辑按钮的事件
		editClickEvent(item) {
			//记录当前选则的模板参数
			this.setCurrentTemplate(item);
			this.$router.push({name: "home", query: {env: "edit"}});
		},
		//删除按钮的事件
		deleteClickEvent(rid) {
			this.infoDialog("确定要删除该模板吗？", () => {
				let callback = (data) => {
					this.infoToast("模板删除成功");
					this.resetTemplateParams(data);
				}
				let errFn = (msg = "删除模板失败") => {
					this.infoToast(msg)
				}
				deleteFn({rid}, callback, errFn);//,storeCode:localStorage.getItem("storeCode")
			});
		},
		//启用按钮的事件
		enableClickEvent(rid) {
			this.infoDialog("确定要启用该模板吗？", () => {
				let callback = (data) => {
					this.resetTemplateParams(data);
				}
				let errFn = (msg = "启用模板失败") => {
					this.infoToast(msg)
				}
				enable({rid}, callback, errFn);//,storeCode:localStorage.getItem("storeCode")
			});
		},
		//修改基本信息的方法
		modifyClickEvent(item) {
			this.tpName = item.tpName;
			this.tpDesc = item.tpDesc;
			this.thumbnailImg = item.tpThumbNail ? [item.tpThumbNail] : [];
			this.updateItem = item;
			this.$refs.editModel.showCover();
		},
		//调用更新的接口
		async modify() {
			if (!this.tpName) {
				this.infoToast("模板名称不能为空");
				return;
			}
			let res = await this.$refs.upload.upload();
			console.log(res);
			// return;
			this.$refs.editModel.hideCover();
			let params = {
				rid: this.updateItem.rid,
				tpName: this.tpName,
				tpDesc: this.tpDesc,
				tpConfig: this.updateItem.tpConfig,
				tpState: this.updateItem.tpState,
				tpThumbNail: res.data.length ? res.data[0] : "",
				//storeCode:localStorage.getItem("storeCode")
			};
			let success = (data) => {
				this.resetTemplateParams(data);
				this.infoToast("信息修改成功");
			}
			let fail = (msg = "信息修改失败") => {
				this.infoToast(msg);
			}
			updated(params, success, fail);
			this.clearParams();
		},
		//显示提示框的方法
		infoDialog(msg, confirmFn) {
			this.$refs.mDialog.dialog({
				msg,
				confirmFn
			});
		},
		//显示Toast的方法
		infoToast(msg) {
			this.$refs.mToast.toast(msg);
		},
		clearParams() {
			this.$refs.upload.deleteImg();
			this.thumbnailImg = [];
		},
		//引入颜色插件
		/*initJscolor() {
			let script = document.createElement("script");
			script.src = "../../../static/script/lib/jscolor.js";
			document.body.appendChild(script);
		},*/
		...mapMutations([
			"setCurrentTemplate",
			"setDomTree",
			"setConfigParams"
		]),
		...mapMutations("gw", [
		])
	},
	components: {
		"blue-btn": BlueButton,
		"m-dialog": Dialog,
		"m-toast": Toast,
		"m-card": Card,
		"edit-model": EditModel,
		"m-upload": ImgUpload,
		"m-column": Column
	},
	created() {
		//console.log("获取当前domTree", JSON.stringify(this.$store.getters.getDomTree));
	},
	mounted(){
		/*this.initJscolor()*/
	}
};
</script>
<style scoped>
	.status-column {
		/* background: red; */
		width: 100%;
		height: 50px;
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}
</style>

